

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>小说列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">

    <style>
      #LAY-component-grid-stack .layui-card-body {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        height: 120px;
      }

      .layui-card span[lay-separator] {
        margin: 0 10px;
        color: #999;
        font-weight: bold;
      }

      .labels-1 {
        color: #777;
        position: absolute;
        left: 110px;
        top: 75px;
      }

      .labels-2 {
        color: #777;
        position: absolute;
        left: 110px;
        top: 100px;
      }

      .brief {
        color: #777;
        position: absolute;
        left: 110px;
        top: 10px;
        height: 50px;
        width: 50%;
        overflow: hidden;
        padding-right: 10px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .novel-item {
        min-width: 385px;
      }

      .cover:hover{
        transform: scale(1.1);
      }
    </style>
  </head>

<body>
  <div class="layui-fluid" id="LAY-component-grid-stack">
    <div class="layui-card">
      <form>
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
          <div class="layui-form-item">
        <div class="layui-inline">
          <input type="text" name="id" placeholder="小说ID" autocomplete="off" class="layui-input" value="{$Request.param.id}">
        </div>

        <div class="layui-inline">
          <input type="text" name="title" placeholder="小说名" autocomplete="off" class="layui-input" value="{$Request.param.title}">
        </div>

        <div class="layui-inline">
          <select name="freq_id">
            <option value="">选择频道</option>
            {foreach $freqArr as $v}
            <option value="{$v.id}" {if $Request.param.freq_id eq $v.id}selected{/if}>{$v.name}</option>
            {/foreach}
          </select>
        </div>

        <div class="layui-inline">
          <select name="class_id"  lay-search>
            <option value="">选择分类</option>
            {foreach $classArr as $v}
            <option value="{$v.id}" {if $Request.param.class_id eq $v.id}selected{/if}>{$v.name}</option>
            {/foreach}
          </select>
        </div>

            <div class="layui-inline">
              <select name="update_status"  lay-search>
                <option value="">连载状态</option>
                <option value="0" {if $Request.param.update_status eq 0 && $Request.param.update_status != null}selected{/if}>连载</option>
                <option value="1" {if $Request.param.update_status eq 1}selected{/if}>完结</option>
                <option value="2" {if $Request.param.update_status eq 2}selected{/if}>弃更</option>
              </select>
            </div>

        <div class="layui-inline">
          <button type="submit" class="layui-btn layuiadmin-btn-admin">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>

            <div class="layui-inline" style="float: right;">
              <button class="layui-btn layuiadmin-btn-role" type="button" data-type="add">添加</button>
            </div>

          </div>
        </div>
      </form>
    </div>

    <div class="layui-row layui-col-space10" style="margin-top: -15px;">

      {foreach $list as $v}
      <div class="layui-col-md12 novel-item">
        <!-- 填充内容 -->
        <div class="layui-card">


          <div class="layui-card-header">
            <span style="color: #777;">ID：{$v.id}</span>
            <a lay-href="/novel/info.html?id={$v.id}" lay-text="{$v.title}">
            <span style="font-size: 16px;padding-left: 10px;">{$v.title}</span>
            </a>
            <span style="float: right;">
               <span style="color: cadetblue;">{$v.chapter_up_time}</span>
            </span>

          </div>

          <div class="layui-card-body">

            <a  style="position: absolute;" lay-href="/novel/info.html?id={$v.id}" lay-text="{$v.title}">
              <img class="cover" src="/static/imgs/pic.jpg" lay-src="{$v.cover_text}" width="82" height="110">
            </a>
            <div class="brief" style="text-align: left;">
              {$v.brief}
            </div>
            <span class="labels-1">
               {$v.update_status_text}<span lay-separator="">/</span>{$v.shelf_text}<span lay-separator="">/</span>{$v.scale}级
            </span>
            <span class="labels-2">
               {$v.author}<span lay-separator="">·</span>{$v.freq['name']}<span lay-separator="">·</span>{$v.novel_class['name']}<span lay-separator="">·</span>{$v.number_words_text}
            </span>

          </div>
        </div>
      </div>
      {/foreach}

    </div>


    <div class="layui-card" style="margin-top: 10px;">
      <div class="layui-card-body">
        <div id="page"></div>
      </div>
    </div>

  </div>



  <script src="/static/layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'laypage','flow'], function () {
      var laypage = layui.laypage;
      var flow = layui.flow;
      var $ = layui.$
              ,admin = layui.admin;

      //懒加载
      flow.lazyimg();

      laypage.render({
        elem: 'page'
        ,count: {$count}
        ,limit:{$limit}
        ,curr:{$page}
        ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        ,jump: function(obj,first){
          console.log(obj)
          if(!first){
            window.location.href = '/spread/novels?id={$Request.param.id}&title={$Request.param.title}&freq_id={$Request.param.freq_id}&class_id={$Request.param.class_id}&update_status={$Request.param.update_status}&page=' + obj.curr + '&limit=' + obj.limit;
          }
        }
      });



      //事件
      var active = {
        a: function(){
        }
      }
      $('.layui-btn.layuiadmin-btn-role').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });


    });
  </script>
</body>